<template>
  <!-- pc -->
  <nav
    class="menu-bar z-10 mobile:hidden w-16 flex-none select-none bg-light-background pt-7 dark:bg-dark-foreground lg:grid xl:w-20"
  >
    <div class="mb-auto text-center">
      <div class="shrink-0 grow-0 mx-auto">
        <img
          :src="userInfo.avatar"
          class="object-cover mx-auto rounded-xl cursor-pointer"
          style="width: 60px; height: 60px"
          @click="
            () => {
              router.push('/index');
            }
          "
        />
      </div>
      <div class="mt-2 relative" ref="notificationCenterPC">
        <div
          @click="flagStore.setSearchBoardOpen(true)"
          :class="
            flagStore.isNotificationOpen
              ? 'bg-light-300 dark:bg-4x-dark-foreground'
              : ''
          "
          class="button-icon cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground flex flex-col items-center"
        >
          <SvgIcon
            name="search"
            iconClass="vue-feather dark:text-gray-100 transition feather feather-bell"
          />
          <div class="text-sm font-bold text-center mt-3">
            {{ i18nStore.translate('search') }}
          </div>
        </div>
        <!-- 通知弹窗 -->
        <!-- <Transition name="slide-fade">
          <div
            v-if="flagStore.isNotificationOpen"
            class="absolute -top-1 left-[68px] z-20 w-60 p-2 rounded-xl dark:bg-2x-dark-foreground bg-white dark:bg-opacity-80 dark:backdrop-blur-2xl backdrop-blur-2xl shadow-xl"
          >

            <div
              class="absolute -left-3 top-4 shadow-xl bg-white w-4 z-20 h-4 -rotate-45 transform origin-top-right dark:bg-2x-dark-foreground backdrop-blur-2xl"
            ></div>

            <div class="relative text-left overflow-y-auto max-h-40 z-10">
              <b
                class="dark:text-gray-200 text-xl font-extrabold px-2.5 py-2 block w-full sticky top-0 bg-white dark:bg-dark-background"
              >
                {{ i18nStore.translate('notification_center') }}
              </b>
              <div v-if="false" class="px-2.5">
                <p
                  v-for="item in []"
                  class="text-sm py-2 overflow-ellipsis whitespace-nowrap overflow-hidden"
                >
                  此处是消息内容。
                </p>
              </div>
              <div v-else class="px-2.5">
                <p
                  class="text-sm py-2 overflow-ellipsis whitespace-nowrap overflow-hidden"
                >
                  {{ i18nStore.translate('no_notifications') }}
                </p>
              </div>
            </div>
          </div>
        </Transition> -->
      </div>
      <div>
        <div
          :title="i18nStore.translate('file')"
          class="mb-1.5 block router-link-active"
          :class="checkHome() ? 'home' : ''"
          @click="goToUrl('/mySmallfiles')"
        >
          <div
            class="button-icon cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground flex flex-col items-center"
          >
            <SvgIcon name="home" iconClass="feather feather-hard-drive" />
            <div class="text-sm font-bold text-center mt-3">
              {{ i18nStore.translate('file') }}
            </div>
          </div>
        </div>
        <div
          :title="i18nStore.translate('profile')"
          class="mb-1.5 block router-link-active"
          :class="checkUser() ? 'user' : ''"
          @click="goToUrl('/userInfo')"
        >
          <div
            class="button-icon cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground flex flex-col items-center"
          >
            <SvgIcon name="user" iconClass="feather feather-user" />
            <div class="text-sm font-bold text-center mt-3">
              {{ i18nStore.translate('profile') }}
            </div>
          </div>
        </div>
        <!-- <div title="设置" class="mb-1.5 block router-link-active settings" @click="goToUrl('')">
                    <div
                        class="button-icon  inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
                        <SvgIcon name="settings" iconClass="feather feather-settings" />
                    </div>
                </div> -->
      </div>
    </div>
    <div class="mt-auto text-center">
      <div :title="i18nStore.translate('theme')" class="mt-6 block">
        <div
          v-if="!isDark"
          @click="toggleDark()"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon name="moon" iconClass="feather feather-moon" />
        </div>
        <div
          v-else
          @click="toggleDark()"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon
            name="sun"
            class="text-[#fff]"
            iconClass="feather feather-sun"
          />
        </div>
      </div>
      <div :title="i18nStore.translate('language')" class="block">
        <div
          v-if="i18nStore.translate.language === 'zh'"
          @click="i18nStore.chooseLanguage('zh-tw')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-1 font-bold align-[14px]"
        >
          简
        </div>
        <div
          v-if="i18nStore.translate.language === 'zh-tw'"
          @click="i18nStore.chooseLanguage('en')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-1 font-bold align-[14px]"
        >
          繁
        </div>
        <div
          v-if="i18nStore.translate.language === 'en'"
          @click="i18nStore.chooseLanguage('espana')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-1 font-bold align-[14px]"
        >
          EN
        </div>
        <div
          v-if="i18nStore.translate.language === 'espana'"
          @click="i18nStore.chooseLanguage('zh')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-1 font-bold align-[14px]"
        >
          EP
        </div>
      </div>
      <div
        @click="lougout"
        :title="i18nStore.translate('logout')"
        class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
      >
        <SvgIcon
          name="logout"
          :class="{ 'text-[#fff]': isDark }"
          iconClass="feather feather-power"
        />
      </div>
    </div>
  </nav>
  <!-- mobie -->
  <nav
    class="menu-bar z-10 pc:hidden w-full flex-none select-none bg-light-background pt-3 dark:bg-dark-foreground xl:w-20"
  >
    <div class="mb-auto text-center flex justify-around items-center">
      <div class="">
        <img
          :src="userInfo.avatar"
          class="object-cover mx-auto rounded-xl cursor-pointer"
          style="width: 60px; height: 60px"
          @click="
            () => {
              router.push('/index');
            }
          "
        />
      </div>
      <div class="relative" ref="notificationCenterMobile">
        <div
          @click="flagStore.setSearchBoardOpen(true)"
          :class="
            flagStore.isNotificationOpen
              ? 'bg-light-300 dark:bg-4x-dark-foreground'
              : ''
          "
          class="relative button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon
            name="search"
            iconClass="vue-feather dark:text-gray-100 transition feather feather-bell"
          />
        </div>
        <!-- 通知弹窗 -->
        <!-- <Transition name="slide-fade">
          <div
            v-if="flagStore.isNotificationOpen"
            class="absolute top-[50px] -left-4 z-20 w-60 p-2 rounded-xl dark:bg-2x-dark-foreground bg-white dark:bg-opacity-80 dark:backdrop-blur-2xl backdrop-blur-2xl shadow-xl"
          >

            <div
              class="absolute left-5 -top-2 shadow-xl bg-white w-4 z-20 h-4 -rotate-45 transform origin-top-right dark:bg-2x-dark-foreground backdrop-blur-2xl"
            ></div>

            <div class="relative text-left overflow-y-auto max-h-40 z-10">
              <b
                class="dark:text-gray-200 text-xl font-extrabold px-2.5 py-2 block w-full sticky top-0 bg-white dark:bg-dark-background"
              >
                {{ i18nStore.translate('notification_center') }}
              </b>
              <div v-if="false" class="px-2.5">
                <p
                  v-for="item in []"
                  class="text-sm py-2 overflow-ellipsis whitespace-nowrap overflow-hidden"
                >
                  此处是消息内容。
                </p>
              </div>
              <div v-else class="px-2.5">
                <p
                  class="text-sm py-2 overflow-ellipsis whitespace-nowrap overflow-hidden"
                >
                  {{ i18nStore.translate('no_notifications') }}
                </p>
              </div>
            </div>
          </div>
        </Transition> -->
      </div>
      <div
        :title="i18nStore.translate('file')"
        class="block router-link-active"
        :class="checkHome() ? 'home' : ''"
        @click="clickMyFilesHandle"
      >
        <div
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon name="home" iconClass="feather feather-hard-drive" />
        </div>
      </div>
      <div
        :title="i18nStore.translate('profile')"
        class="block router-link-active"
        :class="checkUser() ? 'user' : ''"
        @click="goToUrl('/userInfo')"
      >
        <div
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon name="user" iconClass="feather feather-user" />
        </div>
      </div>

      <!-- <div title="设置" class="mb-1.5 block router-link-active settings" @click="goToUrl('')">
                    <div
                        class="button-icon  inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
                        <SvgIcon name="settings" iconClass="feather feather-settings" />
                    </div>
                </div> -->

      <div :title="i18nStore.translate('theme')" class="block">
        <div
          v-if="!isDark"
          @click="toggleDark()"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon name="moon" iconClass="feather feather-moon" />
        </div>
        <div
          v-else
          @click="toggleDark()"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon
            name="sun"
            class="text-[#fff]"
            iconClass="feather feather-sun"
          />
        </div>
      </div>

      <div :title="i18nStore.translate('language')" class="block">
        <div
          v-if="i18nStore.translate.language === 'zh'"
          @click="i18nStore.chooseLanguage('zh-tw')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          简
        </div>
        <div
          v-if="i18nStore.translate.language === 'zh-tw'"
          @click="i18nStore.chooseLanguage('en')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          繁
        </div>
        <div
          v-if="i18nStore.translate.language === 'en'"
          @click="i18nStore.chooseLanguage('espana')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          EN
        </div>
        <div
          v-if="i18nStore.translate.language === 'espana'"
          @click="i18nStore.chooseLanguage('zh')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          EP
        </div>
        <!-- <div
          v-if="i18nStore.translate.language === 'ja'"
          @click="i18nStore.chooseLanguage('ko')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          日
        </div>
        <div
          v-if="i18nStore.translate.language === 'ko'"
          @click="i18nStore.chooseLanguage('ru')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          한
        </div>
        <div
          v-if="i18nStore.translate.language === 'ru'"
          @click="i18nStore.chooseLanguage('zh')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground text-[16px] leading-4 font-bold align-[14px]"
        >
          RU
        </div> -->
      </div>
      <div class="text-center" @click="lougout">
        <div
          :title="i18nStore.translate('logout')"
          class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
        >
          <SvgIcon
            name="logout"
            :class="{ 'text-[#fff]': isDark }"
            iconClass="feather feather-power"
          />
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useDark, useToggle } from '@vueuse/core';
import {
  useUserConfigStore,
  useUserInfoStore,
  useI18nStore,
  useFlagStore
} from '@/stores';
import { useRouter } from 'vue-router';
const i18nStore = useI18nStore();
const flagStore = useFlagStore();
const router = useRouter();
const route = useRoute();

const checkHome = () => {
  const paths = [
    /^\/myFiles/,
    /^\/mySharedItems/,
    /^\/trash/,
    /^\/mySmallfiles/
  ];
  return paths.findIndex((path) => path.test(route.path)) !== -1;
};
const checkUser = () => {
  const paths = [/^\/userInfo/];
  return paths.findIndex((path) => path.test(route.path)) !== -1;
};
const { nightMode } = storeToRefs(useUserConfigStore());
const { userInfo, okCloudDiskToken, tokenTimeStamp } = storeToRefs(
  useUserInfoStore()
);
// 路由切换
const goToUrl = (link) => {
  router.push(link);
};
// 暗黑模式
const isDark = useDark();
const toggleDark = useToggle(isDark);
// 退出登录
const lougout = () => {
  userInfo.value = null;
  okCloudDiskToken.value = null;
  tokenTimeStamp.value = null;
  router.push('/login');
};

const notificationCenterPC = ref(null);
const notificationCenterMobile = ref(null);

const closeNotificationCenter = (e) => {
  if (
    !notificationCenterPC.value.contains(e.target) &&
    !notificationCenterMobile.value.contains(e.target)
  ) {
    flagStore.setNotificationOpen(false);
  }
};

onMounted(() => {
  window.addEventListener('click', closeNotificationCenter, true);
});
onUnmounted(() => {
  window.removeEventListener('click', closeNotificationCenter, true);
});

const clickMyFilesHandle = () => {
  const path = route.path;
  const isMyFiles = /^\/myFiles/.test(path);
  const ismySharedItems = /^\/mySharedItems/.test(path);
  const istrash = /^\/trash/.test(path);
  const ismySmallfiles = /^\/mySmallfiles/.test(path);
  if (isMyFiles || ismySharedItems || istrash || ismySmallfiles) {
    flagStore.setMobileContentSidebarOpen(
      !flagStore.isMobileContentSidebarOpen
    );
  } else {
    flagStore.setMobileContentSidebarOpen(true);
    router.push('/myFiles');
  }
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
